
<template>
  <view class="container">
    <!-- 顶部导航区域 -->
    <view class="header">
      <view class="location">
        <uni-icons type="location-filled" size="20" color="#333333"></uni-icons>
        <text class="location-text">北京市朝阳区</text>
        <uni-icons type="bottom" size="14" color="#666666"></uni-icons>
      </view>
      <view class="search-box">
        <uni-icons type="search" size="18" color="#666666"></uni-icons>
        <text class="placeholder">搜索商家、商品名称</text>
      </view>
    </view>

    <!-- 功能按钮区域 -->
    <view class="function-area">
      <view class="function-item" v-for="(item, index) in functionList" :key="index">
        <image class="function-icon" :src="item.icon" mode="aspectFill"></image>
        <text class="function-text">{{ item.name }}</text>
      </view>
    </view>

    <!-- 店铺列表区域 -->
    <scroll-view class="shop-list" scroll-y @scrolltolower="loadMore">
      <view class="shop-item" v-for="(shop, index) in shopList" :key="index">
        <image class="shop-image" :src="shop.image" mode="aspectFill"></image>
        <view class="shop-info">
          <text class="shop-name">{{ shop.name }}</text>
          <view class="shop-middle">
            <view class="rating">
              <text class="score">{{ shop.score }}分</text>
              <text class="monthly-sales">月售{{ shop.monthlySales }}单</text>
            </view>
            <text class="delivery-time">{{ shop.deliveryTime }}分钟</text>
          </view>
          <view class="shop-bottom">
            <text class="minimum-price">起送¥{{ shop.minimumPrice }}</text>
            <text class="delivery-fee">配送¥{{ shop.deliveryFee }}</text>
            <text class="distance">{{ shop.distance }}km</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const functionList = ref([
  {
    name: '美食外卖',
    icon: 'https://ai-public.mastergo.com/ai/img_res/8a264482af5d14f9d3847375e9692417.jpg'
  },
  {
    name: '超市便利',
    icon: 'https://ai-public.mastergo.com/ai/img_res/f59c9e91a65af54e7b4f8c8bea2e253c.jpg'
  },
  {
    name: '鲜花绿植',
    icon: 'https://ai-public.mastergo.com/ai/img_res/281a41df4411b1b8d04689b9ecfe9596.jpg'
  },
  {
    name: '蛋糕甜点',
    icon: 'https://ai-public.mastergo.com/ai/img_res/cd8545801c659cc20b27c76106361e5a.jpg'
  }
]);

const shopList = ref([
  {
    name: '老北京炸酱面',
    image: 'https://ai-public.mastergo.com/ai/img_res/97d4350fc9ba88e2722fb5806c642e62.jpg',
    score: 4.8,
    monthlySales: 2390,
    deliveryTime: 30,
    minimumPrice: 20,
    deliveryFee: 5,
    distance: 1.2
  },
  {
    name: '川味小馆',
    image: 'https://ai-public.mastergo.com/ai/img_res/a46e9682a1dc770b96fc12f9fd90cc80.jpg',
    score: 4.6,
    monthlySales: 1890,
    deliveryTime: 35,
    minimumPrice: 25,
    deliveryFee: 6,
    distance: 2.1
  },
  {
    name: '粤式茶点',
    image: 'https://ai-public.mastergo.com/ai/img_res/0f68626dfd6d0aaf66f925426d01338e.jpg',
    score: 4.9,
    monthlySales: 3200,
    deliveryTime: 25,
    minimumPrice: 30,
    deliveryFee: 8,
    distance: 0.8
  }
]);

const loadMore = () => {
  // 加载更多店铺数据的逻辑
};
</script>

<style>
page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
}

.header {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.location {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.location-text {
  font-size: 14px;
  color: #333333;
  margin: 0 8rpx;
}

.search-box {
  flex: 1;
  height: 64rpx;
  background-color: #f5f5f5;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}

.placeholder {
  font-size: 14px;
  color: #999999;
  margin-left: 12rpx;
}

.function-area {
  padding: 30rpx;
  background-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  flex-shrink: 0;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.function-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-bottom: 12rpx;
}

.function-text {
  font-size: 12px;
  color: #333333;
}

.shop-list {
  flex: 1;
  overflow: auto;
  padding: 20rpx;
}

.shop-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  margin-bottom: 20rpx;
}

.shop-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.shop-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-name {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}

.shop-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12rpx 0;
}

.rating {
  display: flex;
  align-items: center;
}

.score {
  font-size: 14px;
  color: #ff6b01;
  margin-right: 12rpx;
}

.monthly-sales {
  font-size: 12px;
  color: #666666;
}

.delivery-time {
  font-size: 12px;
  color: #666666;
}

.shop-bottom {
  display: flex;
  align-items: center;
}

.minimum-price, .delivery-fee, .distance {
  font-size: 12px;
  color: #999999;
  margin-right: 16rpx;
}
</style>

